<template>
  <div class="home">
    <el-container>
      <el-header id="header">
        <ul class="nav-area">
          <router-link tag="li" to="#">Home</router-link>
          <router-link tag="li" to="#">Notes</router-link>
          <router-link tag="li" to="#">About</router-link>
          <router-link tag="li" to="#">More</router-link>
        </ul>
        <img class="welcome" src="@/assets/welcome.png" alt="欢迎话语">
        <img class="meet" src="@/assets/meet.png" alt="欢迎话语">
      </el-header>
      <el-main id="main">
        <!-- 笔记部分 -->
        <section class="note-area">
          <img class="note-title" src="@/assets/notes.png" alt="">
          <div class="note-parts">
            <router-link to="#" tag="a" class="go-note-page">
              <div class="css3">
                <svg-icon icon-class="css3" class="note-img mt-20"></svg-icon>
                <h4>Css3样式相关笔记</h4>
                <p>主要涉及到一些css样式方面的技术总结，有借鉴他人或者自己遇到的问题，尽力自己过一遍。总结经验，可以在页面排版上存在更多的方案。</p>
              </div>
            </router-link>
            <router-link to="#" tag="a" class="go-note-page">
              <div class="js">
                <svg-icon icon-class="js" class="note-img"></svg-icon>
                <h4>Js知识相关笔记</h4>
                <p>主要涉及到一些Js方面的技术总结，很多基础的知识以及新的ES6的相关API和爬坑的特别注意事项。愿自己能够成为一名优秀的码农。</p>
              </div>
            </router-link>
            <router-link to="#" tag="a" class="go-note-page">
              <div class="vue">
                <svg-icon icon-class="vuejs" class="note-img"></svg-icon>
                <h4>Vuejs相关知识笔记</h4>
                <p>主要涉及到一些vuejs2.x方面的技术总结，会收纳别人优秀的文章及特别的操作。希望能够在Vue方面学习到更多更深刻的学习。</p>
              </div>
            </router-link>
          </div>
        </section>
        <!-- 笔记部分 -->
        <!-- 我的专栏 -->
        <section class="column-area">
          <img class="column" src="@/assets/column.png" alt="专栏标题">
          <div class="column-kinds">
            <ul>
              <router-link tag="li" to="#">
                <div class="img-box"><img src="" alt=""></div>
                <div class="column-title">
                  面试专栏
                </div>
              </router-link>
              <router-link tag="li" to="#">
                <div class="img-box"><img src="" alt=""></div>
                <div class="column-title">
                  面试专栏
                </div>
              </router-link>
            </ul>
          </div>
        </section>
        <!-- 我的专栏 -->
        <!-- 个人介绍 -->
        <section class="about-area">
          <img class="about-title" src="@/assets/about.png" alt="">
          <time-line :lineData="lineData"></time-line>
        </section>
        <!-- 个人介绍 -->
         <!-- 我的团队 -->
        <section class="team-area">
          <img class="team-title" src="@/assets/team.png" alt="专栏标题">
          <ul class="team-content">
            <li class="character">

            </li>
          </ul>
        </section>
        <!-- 我的团队 -->
      </el-main>
    </el-container>
  </div>
</template>
<script>
import TimeLine from '@/components/TimeLine'
export default {
  name: 'Home',
  data () {
    return {
      lineData: [
        {
          time: '2015-07-01',
          title: '毕业于苏州科技学院，步入前端',
          descript: [
            '1. 07年毕业，拿到学校颁发的学位证和毕业证书，正式结束大学生活',
            '2. 放弃了考研之路，步入社会，渴望得到社会认可和历练',
            '3. 经历了一些辗转，发现前端更适合自己，就步入了前端学习。'
          ]
        },
        {
          time: '2015-07-01',
          title: '毕业于苏州科技学院，步入前端',
          descript: [
            '1. 07年毕业，拿到学校颁发的学位证和毕业证书，正式结束大学生活',
            '2. 放弃了考研之路，步入社会，渴望得到社会认可和历练',
            '3. 经历了一些辗转，发现前端更适合自己，就步入了前端学习。'
          ]
        }
      ]
    }
  },
  components: {
    TimeLine
  }
}
</script>
<style lang="scss" scoped>
.mt-20{
  margin-top: 20px;
}
.home {
  max-width: 1400px;
  margin: 0 auto;
  #header {
    position: relative;
    width: 1400px;
    padding-bottom: 50%;
    background: url('../assets/header_bg.png') no-repeat;
    .nav-area {
      overflow: hidden;
      width: 400px;
      height: 70px;
      line-height: 70px;
      color: #fff;
      position: absolute;
      top: 10px;
      right: 20px;
      li {
        float: left;
        padding: 20px;
        font-size: 18px;
        line-height: 30px;
        cursor: pointer;
      }
      li:hover {
        background: #939393;
      }
    }
    .welcome {
      display: block;
      width: 570px;
      height: 100px;
      margin:0 auto;
      margin-top: 275px;
    }
    .meet{
      display: block;
      width: 870px;
      height: 70px;
      margin: 0 auto;
      margin-top: 50px;
    }
  }
  #main {
    padding: 0;
    .note-area {
      height: 570px;
      background: #fff;
      .note-title {
        display: block;
        margin: 0 auto;
        padding-top: 60px;
      }
      .go-note-page{
        color: #666;
      }
      .note-parts {
        width: 1023px;
        margin: 0 auto;
        // border: 1px solid #ddd;
        display: flex;
      }
      .note-parts div {
        width: 341px;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .note-parts div .note-img {
        width: 74px;
        height: 74px;
        color: #fed136;
      }
      .note-parts div h4 {
        margin: 20px 0;
         font-size: 14px;
        font-weight: bold;
      }
      .note-parts div p {
        padding: 0 30px;
        margin: 20px 0;
        margin-top: 0;
        line-height: 20px;
      }
    }
    .about-area {
      background: #fff;
      .about-title{
        display: block;
        width: 420px;
        height: 140px;
        margin: 0 auto;
        padding-top: 60px;
        margin-bottom: 40px;
      }
    }
    .column-area {
      width: 100%;
      background: #f7f7f7;
      cursor: pointer;
      .column{
        display: block;
        width: 360px;
        height: 120px;
        margin: 0 auto;
        padding-top: 80px;
        margin-bottom: 40px;
      }
      .column-kinds {
        padding-bottom: 100px;
      }
      .column-kinds ul {
        width: 940px;
        height: 394px;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
      }
      .column-kinds .img-box {
        width: 288px;
        height: 298px;
        border: 1px solid red;
      }
      .column-kinds .column-title {
        width: 290px;
        height: 94px;
        line-height: 94px;
        background: #fff;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .team-area {
      width: 100%;
      background: #f7f7f7;
      .team-title{
        display: block;
        width: 420px;
        height: 100px;
        margin: 0 auto;
        padding-top: 100px;
      }
      .team-content {
        width: 940px;
        height: 400px;
        margin: 0 auto;
        border: 1px solid red;
      }
    }
  }
}
</style>
